<html>
	<head>
		<title>jQuery textarea resizer plugin</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="jquery.textarearesizer.compressed.js"></script>
		<script type="text/javascript">
			/* jQuery textarea resizer plugin usage */
			$(document).ready(function() {
				$('textarea.resizable:not(.processed)').TextAreaResizer();
				$('iframe.resizable:not(.processed)').TextAreaResizer();
			});
		</script>
		<style type="text/css">
			div.grippie {
				background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
				border-color:#DDDDDD;
				border-style:solid;
				border-width:0pt 1px 1px;
				cursor:s-resize;
				height:9px;
				overflow:hidden;
			}
			.resizable-textarea textarea {
				display:block;
				margin-bottom:0pt;
				width:95%;
				height: 20%;
			}
		</style>

	</head>
	<body>
		<h1>jQuery TextAreaResizer plugin example</h1>
		<h2>Simple iFrame (jQuery) + Resizer bar (grippie)</h2>

		<iframe class="resizable" src="http://jQuery.com" width="800px" height="200px"></iframe>

		<br />

		<h2>Simple textarea + Resizer bar (grippie)</h2>
			<textarea class="resizable">some test text
some test text
some test text
some test text
some test text
some test text
</textarea>

		<p><a href="http://plugins.jquery.com/project/TextAreaResizer">Link back to jQuery TextAreaResizer plugin page</a></p>
	</body>
</html>
